<!DOCTYPE html>
<html th:replace="~{layouts/layout :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>浏览视频</title>
</head>
<body>
    <section>
        <style>
            .card-body {
                padding: 0;
            }
            .card-title {
                font-weight: 200;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 5px 0;
            }
            .cover {
                display: inline-block;
                padding-top: 135%;
                background-repeat: no-repeat;
                background-position: top right;
            }
            .modal-body {
                text-align: center;
                padding: 40px;
            }
            .videoName {
                margin-top: 10px;
            }
        </style>
        <div class="container">
           <div class="col-md-12">
               <div class="row">
                   <div class="col-md-3" th:each="video : ${videos}">
                       <img th:src="${video.getCover()}" class="coverImg" style="display: none">
                       <div class="card p-2 mb-3 shadow-sm">
                           <a class="cover" th:href="'/video/detail?id='+${video.getId()}" th:style="'background-image: url('+${video.getCover()}+')'"></a>
                           <div class="card-body">
                               <div class="card-title" th:text="${video.getName()}"></div>
                               <div class="btn-group" role="group">
                                   <a th:href="'/player?id='+${video.getId()}" class="btn btn-sm btn-outline-success">播放</a>
                                   <a th:href="'/video/detail?id='+${video.getId()}" class="btn btn-sm btn-outline-secondary">详情</a>
                                   <a th:href="'/video/edit?id='+${video.getId()}" class="btn btn-sm btn-outline-info">编辑</a>
                                   <button th:id="${video.getId()}" th:name="${video.getName()}" class="btn btn-sm btn-outline-danger removeBtn">删除</button>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>

        <div class="modal fade" id="removeConfirmModal" tabindex="-1" role="dialog" aria-labelledby="removeConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="removeConfirmModalLabel">删除确认</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        是否删除 id: <b class="videoId"></b> ？
                        <h5 class="videoName"></h5>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-danger removeLink">删除</a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="/js/remove.js"></script>
        <script>
            var coverImgs = $('.coverImg');
            var covers = $('.cover');
            for (var i = 0; i < coverImgs.length; i += 1) {
              var coverNode = coverImgs.eq(i);
              if (coverNode.width() > coverNode.height()) {
                covers.eq(i).css('background-size', 'auto 100%');
              } else {
                covers.eq(i).css('background-size', '100% auto');
              }
            }
        </script>
    </section>
</body>
</html>
